<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>相对路径</title>
  <style>
    /*
     position: 定位
     relative;相对路径，相对于本身自己的偏移量
    */
div{
  width: 200px;
  height: 100px;
  background:gray;
}
.c1{
  background: red;
  position: relative;
  left: 200px;
}
.c2{
  background: blue;

}
.c3{
  background: #bb7a2a;
  position: relative;
  left: 200px;
}
.c4{
  background: green;
  position: relative;
  left: 400px;
  top: -200px;
}
  </style>
</head>
<body>
<div class="c1"></div>
<div class="c2"></div>
<div class="c3"></div>
<div class="c4"></div>
</body>
</html>